<template>
  <div v-loading="allLoading" class="list-table noPad">
    <el-tabs v-model="view" @tab-click="handleClick">
      <el-tab-pane :disabled="checkRelation('DEAL_EQUITY')" :label="$t('股权投资')" name="DEAL_EQUITY" />
      <el-tab-pane :disabled="checkRelation('DEAL_DEBT')" :label="$t('债权投资')" name="DEAL_DEBT" />
      <el-tab-pane :disabled="checkRelation('DEAL_DEBT_ISSUED')" :label="$t('发行主体')" name="DEAL_DEBT_ISSUED" />
      <el-tab-pane :disabled="checkRelation('DEAL_BF')" :label="$t('参股基金')" name="DEAL_BF" />
      <el-tab-pane :disabled="checkRelation('BF_PORTFOLIO')" :label="$t('间接项目')" name="BF_PORTFOLIO" />
      <el-tab-pane :disabled="checkRelation('INVESTOR')" :label="$t('出资人')" name="INVESTOR" />
      <el-tab-pane :disabled="checkRelation('MEDIATION')" :label="$t('中介机构')" name="MEDIATION" />
      <!-- <el-tab-pane :disabled="checkRelation('GP_BASE')" :label="$t('基金管理人')" name="GP_BASE" />-->
    </el-tabs>
    <chart v-if="showData" :chart-data="chartData" style="width: 100%;height: calc(100% - 50px);" />
    <el-row v-if="showNoData">
      <el-col :span="24">
        <div class="relationNoData">
          <span>{{ $t('暂无数据') }}</span>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import chart from './relations/chart'
import { getGroupSourceByDataId } from '@/api/company/client/companyClient'
import { getInvestChart } from '@/api/company/client/companyClient'
import { getLpInvestChart } from '@/api/fund/lpBase/lpBase'
import { getMediationChart } from '@/api/deal/mediation/mediationBase'
export default {
  components: {
    chart
  },
  data() {
    return {
      // 展示视图
      view: '',
      // 标的公司ID
      dataId: '',
      // 查询参数
      queryParams: {
        // 公司ID
        dataId: this.dataId
      },
      form: {},
      allLoading: false,
      // 当前公司存在的身份
      sourceList: [],
      // 是否展示无数据提示
      showNoData: false,
      // 是否展示数据
      showData: true,
      chartData: {}
    }
  },
  created() {
    this.initData()
  },
  methods: {
    initData(dataId) {
      this.dataId = ''
      this.dataId = dataId
      this.queryParams.dataId = dataId || this.$route.query.companyId
      this.getSource()
    },
    checkRelation(val) {
      if (this.sourceList.indexOf(val) !== -1) {
        return false
      } else {
        return true
      }
    },
    // 获取当前公司的所有来源
    getSource() {
      getGroupSourceByDataId(this.queryParams).then(res => {
        if (res.data === null || res.data.length === 0) {
          this.showNoData = true
          this.showData = false
        } else {
          this.showData = true
          this.sourceList = res.data
          this.view = res.data[0]
          var row = { name: this.view }
          this.handleClick(row)
          this.showNoData = false
        }
      })
    },
    handleClick(tab) {
      this.view = tab.name
      this.chartData = {}
      console.log(tab.name)
      if (tab.name === 'DEAL_EQUITY' || tab.name === 'DEAL_DEBT' || tab.name === 'DEAL_DEBT_ISSUED' || tab.name === 'DEAL_BF' || tab.name === 'BF_PORTFOLIO') { // 股权投资、债权投资、发行主体、参股基金、间接项目
        this.queryParams.source = tab.name
        getInvestChart(this.queryParams).then(response => {
          this.chartData = response.datas.resultMap
        })
      } else if (tab.name === 'INVESTOR') { // 出资人
        this.queryParams.source = 'INVESTOR'
        getLpInvestChart(this.queryParams).then(response => {
          this.chartData = response.datas.resultMap
        })
      } else if (tab.name === 'MEDIATION') { // 中介机构
        this.queryParams.source = 'MEDIATION'
        getMediationChart(this.queryParams).then(response => {
          this.chartData = response.datas.resultMap
        })
      } else {
        this.showNoData = true
        this.showData = false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.relationNoData {
  width: 100%;
  height: 240px;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  color: #7d7d7d;
  line-height: 240px;
}
</style>
